<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- <link rel="preload" href="https://pic1.zhimg.com/v2-89075482d5006d9d923b558700fdf376_is.jpg"> -->
</head>
<body>
  <img src="" alt="12"/>
  <script>
    setTimeout(() => {
      const img = document.querySelector("img");
      img.setAttribute("src", "https://pic1.zhimg.com/v2-89075482d5006d9d923b558700fdf376_is.jpg?time=1232332");
      // 1.加上preload的情况下，即时是第一次访问这个图片。也可以看到这个图片是从disk cache中获取的
      // 2.如果没有加上preload,就可以在network中的size看到大小，就是从网络获取的。
      // 3.如果这个图片之前被浏览器其他位置访问过，在这个地方再次访问，也会是disk cache
    }, 2000);
  </script>
</body>
</html>